<template>
  <div class="charts-wrap">
    <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
      <el-col :span="16">
        <div class="workshop-charts-common">
          <div class="workshop-title">MTBF</div>
          <div class="right-icon" @click="searchCharts(1)"><i class="el-icon-crop" /></div>
          <div id="echarts1" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="workshop-charts-common">
          <div class="workshop-title">设备可动率报表</div>
          <div class="right-icon" @click="searchCharts(2)"><i class="el-icon-crop" /></div>
          <div id="echarts2" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
      <el-col :span="16">
        <div class="workshop-charts-common">
          <div class="workshop-title">MTTR</div>
          <div class="right-icon" @click="searchCharts(3)"><i class="el-icon-crop" /></div>
          <div id="echarts3" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="workshop-charts-common">
          <div class="workshop-title">设备故障停线时间报表</div>
          <div class="right-icon" @click="searchCharts(4)"><i class="el-icon-crop" /></div>
          <div id="echarts4" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
      <el-col :span="8">
        <div class="workshop-charts-common">
          <div class="workshop-title">设备故障停线次数报表</div>
          <div class="right-icon" @click="searchCharts(5)"><i class="el-icon-crop" /></div>
          <div id="echarts5" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="workshop-charts-common">
          <div class="workshop-title">停台时间</div>
          <div class="right-icon" @click="searchCharts(6)"><i class="el-icon-crop" /></div>
          <div id="echarts6" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="workshop-charts-common">
          <div class="workshop-title">故障十项分析</div>
          <div class="right-icon" @click="searchCharts(7)"><i class="el-icon-crop" /></div>
          <div id="echarts7" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
      <el-col :span="8">
        <div class="workshop-charts-common">
          <div class="workshop-title">预防计划完成率</div>
          <div class="right-icon" @click="searchCharts(8)"><i class="el-icon-crop" /></div>
          <div id="echarts8" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="workshop-charts-common">
          <div class="workshop-title">预防维护工时（专业维护）</div>
          <div class="right-icon" @click="searchCharts(9)"><i class="el-icon-crop" /></div>
          <div id="echarts9" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="workshop-charts-common">
          <div class="workshop-title">预防维护发现问题统计表</div>
          <div class="right-icon" @click="searchCharts(10)"><i class="el-icon-crop" /></div>
          <div id="echarts10" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px; border-bottom: 0;">
      <el-col :span="8">
        <div class="workshop-charts-common">
          <div class="workshop-title">预防性维修占比（PM）</div>
          <div class="right-icon" @click="searchCharts(11)"><i class="el-icon-crop" /></div>
          <div id="echarts11" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="workshop-charts-common">
          <div class="workshop-title">TOP10消费备件</div>
          <div class="right-icon" @click="searchCharts(12)"><i class="el-icon-crop" /></div>
          <div id="echarts12" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="workshop-charts-common">
          <div class="workshop-title">备件采购报表</div>
          <div class="right-icon" @click="searchCharts(13)"><i class="el-icon-crop" /></div>
          <div id="echarts13" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px;">
      <el-col :span="8">
        <div class="workshop-charts-common">
          <div class="workshop-title">备件入库报表</div>
          <div class="right-icon" @click="searchCharts(14)"><i class="el-icon-crop" /></div>
          <div id="echarts14" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="workshop-charts-common">
          <div class="workshop-title">备件出库报表</div>
          <div class="right-icon" @click="searchCharts(15)"><i class="el-icon-crop" /></div>
          <div id="echarts15" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="workshop-charts-common">
          <div class="workshop-title">备件盘点报表</div>
          <div class="right-icon" @click="searchCharts(16)"><i class="el-icon-crop" /></div>
          <div id="echarts16" class="workshop-charts" style="height: 300px;" />
        </div>
      </el-col>
    </el-row>
    <el-dialog :title="titleText" :visible.sync="dialogTableVisible" width="75%" center :destroy-on-close="true" @open="open()" @close="close()">
      <div id="c">
        <div class="condition">
          <div class="select-div">
            <div :hidden="c1">
              <div class="select-div">车间：</div>
              <div class="select-div">
                <el-select v-model="searchData1.workshop" size="mini" @change="factoryChange1">
                  <el-option v-for="(item, workshopIndex1) in mtbfWorkShop" :key="workshopIndex1" :label="item.n" :value="item.i" />
                </el-select>
              </div>
              <div class="select-div ml10">
                <div class="select-div">班组：</div>
                <div class="select-div" style="width: 110px;">
                  <v-select v-model="searchData1.member" action="classByFactory" :query="{factory: searchData1.workshop}" />
                </div>
              </div>
            </div>
            <div :hidden="c2">
              <div class="select-div">车间：</div>
              <div class="select-div">
                <el-select v-model="searchData2.workshop" size="mini">
                  <el-option v-for="(item, workshopIndex2) in chartsWorkShop" :key="workshopIndex2" :label="item" :value="workshopIndex2" />
                </el-select>
              </div>
            </div>
            <div :hidden="c3">
              <div class="select-div">
                <div class="select-div">筛选周期：</div>
                <div class="select-div">
                  <el-select v-model="searchData3.workshop" size="mini">
                    <el-option v-for="(item,workshopIndex3) in mttrWorkShop" :key="workshopIndex3" :label="item" :value="workshopIndex3" />
                  </el-select>
                </div>
              </div>
            </div>
            <div :hidden="c4">
              <div class="select-div">筛选周期：</div>
              <div class="select-div">
                <el-date-picker v-model="searchData4.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
              </div>
            </div>
            <div :hidden="c5">
              <div class="select-div">筛选周期：</div>
              <div class="select-div">
                <el-date-picker v-model="searchData5.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
              </div>
            </div>
            <div :hidden="c6">
              <div class="select-div">
                <div class="select-div">筛选周期：</div>
                <div class="select-div">
                  <el-date-picker v-model="searchData6.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
                </div>
              </div>
              <div class="select-div ml10">
                <div class="select-div">车间：</div>
                <div class="select-div">
                  <el-select v-model="searchData6.workshop" size="mini" @change="factoryChange6">
                    <el-option v-for="(item,workshopIndex6) in planWorkshop" :key="workshopIndex6" :label="item" :value="workshopIndex6" />
                  </el-select>
                </div>
              </div>
              <div class="select-div ml10">
                <div class="select-div">班组：</div>
                <div class="select-div" style="width: 110px;">
                  <v-select v-model="searchData6.member" action="classByFactory" :query="{factory: searchData6.workshop}" multiple />
                </div>
              </div>
            </div>
            <div :hidden="c7">
              <div class="select-div">
                <div class="select-div">筛选周期：</div>
                <div class="select-div">
                  <el-date-picker v-model="searchData7.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" />
                </div>
              </div>
              <div class="select-div ml10">
                <div class="select-div">车间：</div>
                <div class="select-div">
                  <el-select v-model="searchData7.workshop" size="mini">
                    <el-option v-for="(item,workshopIndex4) in planWorkshop" :key="workshopIndex4" :label="item" :value="workshopIndex4" />
                  </el-select>
                </div>
              </div>
            </div>
            <div :hidden="c8">
              <div class="select-div">
                <div class="select-div">筛选周期：</div>
                <div class="select-div">
                  <el-date-picker v-model="searchData8.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
                </div>
              </div>
              <div class="select-div ml10">
                <div class="select-div">种类：</div>
                <div class="select-div">
                  <el-select v-model="searchData8.kind" size="mini">
                    <el-option v-for="(item,search8KindIndex) in planKind" :key="search8KindIndex" :label="item" :value="search8KindIndex" />
                  </el-select>
                </div>
              </div>
            </div>
            <div :hidden="c9">
              <div class="select-div">
                <div class="select-div">筛选周期：</div>
                <div class="select-div">
                  <el-date-picker v-model="searchData9.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
                </div>
              </div>
            </div>
            <div :hidden="c10">
              <div class="select-div">
                <div class="select-div">筛选周期：</div>
                <div class="select-div">
                  <el-date-picker v-model="searchData10.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
                </div>
              </div>
              <div class="select-div ml10">
                <div class="select-div">车间：</div>
                <div class="select-div" style="width: 110px;">
                  <el-select v-model="searchData10.workshop" size="mini" @change="factoryChange10">
                    <el-option v-for="(item,workshopIndex10) in planWorkshop" :key="workshopIndex10" :label="item" :value="workshopIndex10" />
                  </el-select>
                </div>
              </div>
              <div class="select-div ml10">
                <div class="select-div">班组：</div>
                <div class="select-div" style="width: 110px;">
                  <v-select v-model="searchData10.member" action="classByFactory" :query="{factory: searchData10.workshop}" multiple />
                </div>
              </div>
              <div class="select-div ml10">
                <div class="select-div">工单种类：</div>
                <div class="select-div" style="width: 110px;">
                  <el-select v-model="searchData10.kind" placeholder="请选择" size="mini">
                    <el-option key="0" label="自主点检" :value="0" />
                    <el-option key="1" label="自主维护" :value="1" />
                    <el-option key="2" label="专业点检" :value="2" />
                    <el-option key="3" label="专业维护" :value="3" />
                  </el-select>
                </div>
              </div>
            </div>
            <div :hidden="c11">
              <div class="select-div">筛选周期：</div>
              <div class="select-div">
                <el-date-picker v-model="searchData11.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
              </div>
            </div>
            <div :hidden="c12">
              <div class="select-div">
                <div class="select-div">筛选周期：</div>
                <div class="select-div">
                  <el-date-picker v-model="searchData12.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
                </div>
              </div>
              <div class="select-div ml10">
                <div class="select-div">车间：</div>
                <div class="select-div">
                  <el-select v-model="searchData12.workshop" size="mini">
                    <el-option v-for="(item,workshopIndex9) in chartsWorkShop" :key="workshopIndex9" :label="item" :value="workshopIndex9" />
                  </el-select>
                </div>
              </div>
              <div class="select-div ml10">
                <div class="select-div">排序：</div>
                <div class="select-div">
                  <el-select v-model="searchData12.sort" size="mini">
                    <el-option v-for="(item,pariceIndex12) in priceSort" :key="pariceIndex12" :label="item" :value="pariceIndex12" />
                  </el-select>
                </div>
              </div>
            </div>
            <div :hidden="c13"></div>
            <div :hidden="c14"></div>
            <div :hidden="c15"></div>
            <div :hidden="c16"></div>
          </div>
          <div class="select-div ml10">
            <el-button type="primary" size="mini" @click="searchHandle1">搜索</el-button>
          </div>
        </div>
      </div>
      <div id="bigCharts" class="bigCharts" />
    </el-dialog>
  </div>
</template>
<script>
import API from '@/api/charts/charts'
import { planWorkshop, priceSort } from '@/utils/options'
import VSelect from '@/components/select'
import * as echarts from 'echarts'
export default {
  components: {
    VSelect
  },
  data() {
    return {
      dialogTableVisible: false,
      titleText: '大报表',
      titleArr: ['MTBF', '设备可动率报表', 'MTTR', '设备故障停线时间报表', '设备故障停线次数报表', '停台时间', '故障十项分析', '预防计划完成率', '预防维护工时（专业维护）', '预防维护发现问题统计表', '预防性维修占比（PM）', 'TOP10消费备件', '备件采购报表', '备件入库报表', '备件出库报表', '备件盘点报表'],
      data1: {
        categories: ['工厂', '指标'],
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        values: [
          {
            name: '工厂',
            type: 'line',
            data: [12, 13, 10, 13, 90, 23, 21]
          },
          {
            name: '指标',
            type: 'line',
            data: [22, 18, 19, 23, 29, 33, 31]
          }
        ]
      },
      searchData1: {
        workshop: 99,
        member: null
      },
      data2: {
        categories: ['工厂', '指标'],
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        values: [
          {
            name: '工厂',
            type: 'line',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '指标',
            type: 'line',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      },
      searchData2: {
        workshop: 0
      },
      data3: {
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      searchData3: {
        workshop: 0
      },
      data4: {
        categories: [],
        minute: []
      },
      searchData4: {
        sort: 'minute'
      },
      data5: {
        categories: [],
        times: []
      },
      searchData5: {
        sort: 'times'
      },
      data6: {},
      searchData6: {},
      data7: {},
      searchData7: {},
      data8: {
        categories: ['冲压车间', '车身车间', '涂装车间', '总装车间', '生产管理部', '质量部', '设备动力部']
      },
      searchData8: {
        kind: 0
      },
      data9: {
        categories: ['冲压', '车身', '涂装', '总装', '动力'],
        minute: [0, 0, 0, 0, 0, 0, 0]
      },
      searchData9: {},
      data10: {
        categories: ['冲压', '车身', '涂装', '总装', '质', '生管', '动力'],
        times: []
      },
      searchData10: {
        member: null
      },
      data11: {
        categories: ['冲压', '车身', '涂装', '总装', '质量', '生管', '动力'],
        percent: [12, 49, 70, 23, 25, 22, 33]
      },
      searchData11: {},
      data12: {
        circle: [
          {
            name: '',
            value: 10
          },
          {
            name: '',
            value: 10
          },
          {
            name: '',
            value: 10
          }
        ]
      },
      searchData12: {
        sort: 0
      },
      data13: {
        x: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      searchData13: {},
      data14: {},
      searchData14: {},
      data15: {},
      searchData15: {},
      data16: {},
      searchData16: {},
      chartsWorkShop: ['工厂', '冲压车间', '车身车间', '涂装车间', '总装车间'],
      mttrWorkShop: ['工厂', '冲压保全班', '车身保全班', '涂装保全班', '总装保全班', '动力维修班'],
      // mtbfWorkShop: ['工厂', '冲压车间', '车身车间', '涂装车间', '总装车间'],
      mtbfWorkShop: [
        { i: 99, n: '工厂' },
        { i: 0, n: '冲压车间' },
        { i: 1, n: '车身车间' },
        { i: 2, n: '涂装车间' },
        { i: 3, n: '总装车间' }
      ],
      queryWorkshop1: null,
      queryWorkshop3: null,
      queryWorkshop6: null,
      queryWorkshop10: null,
      currentOpenIndex: null,
      c1: true,
      c2: true,
      c3: true,
      c4: true,
      c5: true,
      c6: true,
      c7: true,
      c8: true,
      c9: true,
      c10: true,
      c11: true,
      c12: true,
      c13: true,
      c14: true,
      c15: true,
      c16: true,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      planWorkshop,
      planKind: ['自主点检', '专业点检', '自主维护', '专业维护'],
      priceSort
    }
  },
  watch: {
    option: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            this.myChart.setOption(newVal)
          } else {
            this.myChart.setOption(oldVal)
          }
        } else {
          this.init()
        }
      },
      deep: true
    }
  },
  mounted() {
    this.index()
    /* ECharts图表 */
    // window.onresize = function() {
    //   this.index()
    // }
    // window.onresize = () => {
    //   return (() => {
    //     console.log(document.body.clientWidth)
    //     console.log(document.body.clientHeight)
    //     this.index()
    //   })()
    // }
    window.onresize = () => {
      // this.index()
    }
  },
  methods: {
    index() {
      this.first()
      this.second()
      this.third()
      this.fourth()
      this.fifth()
      this.sixth()
      this.seventh()
      this.eighth()
      this.ninth()
      this.tenth()
      this.eleventh()
      this.twelfth()
      this.thirteenth()
      this.fourteenth()
      this.fifteenth()
      this.sixteenth()
    },
    first(chartDomAct = 'echarts1') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts1(this.searchData1).then(res => {
        this.data1.categories = [res.data.n, '指标', '平均']
        this.data1.values = [
          {
            name: res.data.n,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#16ea76',
                lineStyle: {
                  color: '#16ea76',
                  width: 2.5
                }
              }
            },
            data: res.data.f
          },
          {
            name: '指标',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#58c6ff',
                lineStyle: {
                  color: '#58c6ff',
                  width: 2.5
                }
              }
            },
            data: res.data.z
          },
          {
            name: '平均',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#ff6262',
                lineStyle: {
                  color: '#ff6262',
                  width: 2.5
                }
              }
            },
            data: res.data.p
          }
        ]
        const option = {
          tooltip: {
            trigger: 'axis',
            formatter(e) {
              return e[0].name + '<br>' + e.map((item) => {
                return `<span class="eacharts-span" style="background:${item.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${item.seriesName} ${item.value}分钟<br>`
              }).join('')
            }
          },
          legend: {
            data: this.data1.categories,
            bottom: 0
          },
          grid: {
            // left: '3%',
            // right: '4%',
            // bottom: '3%',
            containLabel: true
          },
          toolbox: {
            show: false,
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data1.month
          },
          yAxis: {
            type: 'value',
            name: '分钟'
          },
          series: this.data1.values
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    second(chartDomAct = 'echarts2') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts2(this.searchData2).then(res => {
        const z = res.data.z
        const f = res.data.f
        z.map(zItem => {
          if (zItem === '') {
            this.$message.error('请先完善每个月的月读指标！')
          }
        })
        this.data2.categories = [res.data.n, '指标', '平均']
        this.data2.values = [
          {
            name: res.data.n,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#16ea76',
                lineStyle: {
                  color: '#16ea76',
                  width: 2.5
                }
              }
            },
            data: f
          },
          {
            name: '指标',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#58c6ff',
                lineStyle: {
                  color: '#58c6ff',
                  width: 2.5
                }
              }
            },
            data: res.data.z
          },
          {
            name: '平均',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#ff6262',
                lineStyle: {
                  color: '#ff6262',
                  width: 2.5
                }
              }
            },
            data: res.data.p
          }
        ]
        const option = {
          tooltip: {
            trigger: 'axis',
            formatter(e) {
              return e[0].name + '<br>' + e.map((item) => {
                return `<span class="eacharts-span" style="background:${item.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${item.seriesName} ${item.value}%<br>`
              }).join('')
            }
          },
          legend: {
            data: this.data2.categories,
            bottom: 0
          },
          grid: {
            // left: '3%',
            // right: '4%',
            // bottom: '3%',
            containLabel: true
          },
          toolbox: {
            show: false,
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data2.month
          },
          yAxis: {
            type: 'value',
            name: '百分比（%）'
          },
          series: this.data2.values
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    third(chartDomAct = 'echarts3') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts3(this.searchData3).then(res => {
        this.data3.categories = [res.data.n, '指标', '平均']
        this.data3.values = [
          {
            name: res.data.n,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#16ea76',
                lineStyle: {
                  color: '#16ea76',
                  width: 2.5
                }
              }
            },
            data: res.data.f
          },
          {
            name: '指标',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#58c6ff',
                lineStyle: {
                  color: '#58c6ff',
                  width: 2.5
                }
              }
            },
            data: res.data.z
          },
          {
            name: '平均',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#ff6262',
                lineStyle: {
                  color: '#ff6262',
                  width: 2.5
                }
              }
            },
            data: res.data.p
          }
        ]
        const option = {
          tooltip: {
            trigger: 'axis',
            formatter(e) {
              return e[0].name + '<br>' + e.map((item) => {
                return `<span class="eacharts-span" style="background:${item.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${item.seriesName} ${item.value}分钟<br>`
              }).join('')
            }
          },
          legend: {
            data: this.data3.categories,
            bottom: 0
          },
          grid: {
            // left: '3%',
            // right: '4%',
            // bottom: '3%',
            containLabel: true
          },
          toolbox: {
            show: false,
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data3.month
          },
          yAxis: {
            type: 'value',
            name: '分钟'
          },
          series: this.data3.values
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    fourth(chartDomAct = 'echarts4') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts4(this.searchData4).then(res => {
        const option = {
          tooltip: {
            trigger: 'item',
            extStyle: {
              fontSize: 14
            },
            formatter(e) {
              return `${e.name}：${e.value}分钟`
            }
          },
          xAxis: [
            {
              type: 'category',
              data: res.data.categories
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '分钟'
            }
          ],
          legend: {
            data: ['分钟']
          },
          series: [
            {
              type: 'bar',
              barWidth: '20%',
              data: res.data.minute,
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#ff347c' },
                      { offset: 0.5, color: '#017cee' },
                      { offset: 1, color: '#1ed584' }
                    ]
                  )
                }
              }
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    fifth(chartDomAct = 'echarts5') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts4(this.searchData5).then(res => {
        const option = {
          tooltip: {
            trigger: 'item',
            extStyle: {
              fontSize: 14
            },
            formatter(e) {
              return `${e.name}：${e.value}次`
            }
          },
          xAxis: [
            {
              type: 'category',
              data: res.data.categories
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '次'
            }
          ],
          legend: {
            data: ['次']
          },
          series: [
            {
              type: 'bar',
              barWidth: '20%',
              data: res.data.times,
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#ff347c' },
                      { offset: 0.5, color: '#017cee' },
                      { offset: 1, color: '#1ed584' }
                    ]
                  )
                }
              }
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    sixth(chartDomAct = 'echarts6') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts4(this.searchData6).then(res => {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            show: false,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['分钟', '次数'],
            bottom: 0
          },
          xAxis: [
            {
              type: 'category',
              data: res.data.categories,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '分钟'
            },
            {
              type: 'value',
              name: '次数'
            }
          ],
          series: [
            {
              barWidth: '20%',
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#ff347c' },
                      { offset: 0.5, color: '#017cee' },
                      { offset: 1, color: '#1ed584' }
                    ]
                  )
                }
              },
              name: '分钟',
              type: 'bar',
              data: res.data.minute
            },
            {
              name: '次数',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#58c6ff',
                  lineStyle: {
                    color: '#58c6ff',
                    width: 2.5
                  }
                }
              },
              data: res.data.times
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    seventh(chartDomAct = 'echarts7') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts7(this.searchData7).then(res => {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            show: false,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['分钟', '次数'],
            bottom: 0
          },
          xAxis: [
            {
              type: 'category',
              data: res.data.categories,
              // data: ['种类1种类1', '种类1种类1', '种类1种类1', '种类1种类1', '种类1种类1', '种类1种类1', '种类1', '种类1', '种类1', '种类1'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '分钟'
            },
            {
              type: 'value',
              name: '次数'
            }
          ],
          series: [
            {
              barWidth: '20%',
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#ff347c' },
                      { offset: 0.5, color: '#017cee' },
                      { offset: 1, color: '#1ed584' }
                    ]
                  )
                }
              },
              name: '分钟',
              type: 'bar',
              data: res.data.minute
              // data: [10, 2, 3, 4, 5, 6, 7, 8, 9, 10]
            },
            {
              name: '次数',
              type: 'line',
              itemStyle: {
                normal: {
                  color: '#58c6ff',
                  lineStyle: {
                    color: '#58c6ff',
                    width: 2.5
                  }
                }
              },
              yAxisIndex: 1,
              data: res.data.times
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    eighth(chartDomAct = 'echarts8') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts8(this.searchData8).then(res => {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter(e) {
              return e[0].name + '<br>' + e.map((item) => {
                return `<span class="eacharts-span" style="background:${item.color};width: 10px;height: 10px;display: inline-block; border-radius: 50%;margin-right: 6px;}"></span>${item.seriesName} ${item.value}%<br>`
              }).join('')
            }
          },
          legend: {
            // show: false,
            data: res.data.cc,
            bottom: 0
          },
          // grid: {
          //   left: '3%',
          //   right: '4%',
          //   bottom: '3%',
          //   containLabel: true
          // },
          xAxis: [
            {
              type: 'category',
              data: ['冲压车间', '车身车间', '涂装车间', '总装车间', '生产管理部', '质量部', '设备动力部']
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value}%'
              }
            }
          ],
          series: res.data.pp
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    ninth(chartDomAct = 'echarts9') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts9(this.searchData9).then(res => {
        this.data9.minute = res.data
        const option = {
          tooltip: {
            trigger: 'axis',
            formatter(e) {
              const item = e[0]
              let name = ''
              if (item.name === '动力') {
                name = '动力维修班'
              } else {
                name = item.name + '保全班'
              }
              return `<span class="echarts-span">${name}：</br>${item.value}分钟</span>`
            }
          },
          xAxis: {
            type: 'category',
            data: this.data9.categories
          },
          yAxis: {
            type: 'value',
            name: '（分钟）'
          },
          series: [
            {
              barWidth: '20%',
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#ff347c' },
                      { offset: 0.5, color: '#017cee' },
                      { offset: 1, color: '#1ed584' }
                    ]
                  )
                }
              },
              data: this.data9.minute,
              type: 'bar'
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    tenth(chartDomAct = 'echarts10') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts10(this.searchData10).then(res => {
        this.data10.times = res.data.times
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: res.data.categories
          },
          yAxis: {
            type: 'value',
            name: '（次）'
          },
          series: [
            {
              itemStyle: {
                normal: {
                  color: '#58c6ff',
                  lineStyle: {
                    color: '#58c6ff',
                    width: 2.5
                  }
                }
              },
              data: this.data10.times,
              type: 'line'
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    eleventh(chartDomAct = 'echarts11') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts11(this.searchData11).then(res => {
        this.data11.percent = res.data
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            },
            formatter(e) {
              return `${e[0].name}<br>${e[0].value}%`
            }
          },
          xAxis: {
            type: 'category',
            data: this.data11.categories
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              interval: 'auto',
              formatter: '{value}%'
            }
          },
          series: [
            {
              itemStyle: {
                normal: {
                  color: '#58c6ff',
                  lineStyle: {
                    color: '#58c6ff',
                    width: 2.5
                  }
                }
              },
              data: this.data11.percent,
              type: 'line'
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    twelfth(chartDomAct = 'echarts12') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts12(this.searchData12).then(res => {
        this.data12.circle = res.data
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Top10备件',
              type: 'pie',
              radius: ['40%', '70%'],
              data: this.data12.circle,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    thirteenth(chartDomAct = 'echarts13') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts13(this.searchData13).then(res => {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            show: false,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['金额（元）', '数量（个）'],
            bottom: 0
          },
          xAxis: [
            {
              type: 'category',
              data: this.data13.x,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '金额（元）'
            },
            {
              type: 'value',
              name: '数量（个）'
            }
          ],
          series: [
            {
              barWidth: '20%',
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#ff347c' },
                      { offset: 0.5, color: '#017cee' },
                      { offset: 1, color: '#1ed584' }
                    ]
                  )
                }
              },
              name: '金额（元）',
              type: 'bar',
              data: res.data.price
            },
            {
              name: '数量（个）',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#58c6ff',
                  lineStyle: {
                    color: '#58c6ff',
                    width: 2.5
                  }
                }
              },
              data: res.data.number
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    fourteenth(chartDomAct = 'echarts14') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts14(this.searchData14).then(res => {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            show: false,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['金额（元）', '数量（个）'],
            bottom: 0
          },
          xAxis: [
            {
              type: 'category',
              data: this.data13.x,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '金额（元）'
            },
            {
              type: 'value',
              name: '数量（个）'
            }
          ],
          series: [
            {
              barWidth: '20%',
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#ff347c' },
                      { offset: 0.5, color: '#017cee' },
                      { offset: 1, color: '#1ed584' }
                    ]
                  )
                }
              },
              name: '金额（元）',
              type: 'bar',
              data: res.data.price
            },
            {
              name: '数量（个）',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#58c6ff',
                  lineStyle: {
                    color: '#58c6ff',
                    width: 2.5
                  }
                }
              },
              data: res.data.number
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    fifteenth(chartDomAct = 'echarts15') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts15(this.searchData15).then(res => {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            show: false,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['金额（元）', '数量（个）'],
            bottom: 0
          },
          xAxis: [
            {
              type: 'category',
              data: this.data13.x,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '金额（元）'
            },
            {
              type: 'value',
              name: '数量（个）'
            }
          ],
          series: [
            {
              barWidth: '20%',
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#ff347c' },
                      { offset: 0.5, color: '#017cee' },
                      { offset: 1, color: '#1ed584' }
                    ]
                  )
                }
              },
              name: '金额（元）',
              type: 'bar',
              data: res.data.price
            },
            {
              name: '数量（个）',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#58c6ff',
                  lineStyle: {
                    color: '#58c6ff',
                    width: 2.5
                  }
                }
              },
              data: res.data.number
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    sixteenth(chartDomAct = 'echarts16') {
      const chartDom = document.getElementById(chartDomAct)
      const myChart = echarts.init(chartDom)
      API.charts16(this.searchData16).then(res => {
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '备件盘点表',
              type: 'pie',
              radius: ['40%', '70%'],
              data: [
                { value: res.data.s, name: '盘亏数量' },
                { value: res.data.l, name: '实际数量' }
              ],
              color: ['#f84f69', '#3490ff']
            }
          ]
        }
        this.$nextTick(() => {
          option && myChart.setOption(option)
          myChart.resize()
        })
      })
    },
    searchHandle() {
      this.index()
    },
    searchCharts(number) {
      this.dialogTableVisible = true
      this.titleText = this.titleArr[number - 1]
      for (let i = 1; i <= 16; i++) {
        if (number === i) {
          this.currentOpenIndex = i
          this.open('bigCharts', i)
        }
      }
    },
    open(s, n) {
      if (n === 1) {
        this.c1 = false
        this.$nextTick(() => {
          this.first(s)
        })
      }
      if (n === 2) {
        this.c2 = false
        this.$nextTick(() => {
          this.second(s)
        })
      } else if (n === 3) {
        this.c3 = false
        this.$nextTick(() => {
          this.third(s)
        })
      } else if (n === 4) {
        this.c4 = false
        this.$nextTick(() => {
          this.fourth(s)
        })
      } else if (n === 5) {
        this.c5 = false
        this.$nextTick(() => {
          this.fifth(s)
        })
      } else if (n === 6) {
        this.c6 = false
        this.$nextTick(() => {
          this.sixth(s)
        })
      } else if (n === 7) {
        this.c7 = false
        this.$nextTick(() => {
          this.seventh(s)
        })
      } else if (n === 8) {
        this.c8 = false
        this.$nextTick(() => {
          this.eighth(s)
        })
      } else if (n === 9) {
        this.c9 = false
        this.$nextTick(() => {
          this.ninth(s)
        })
      } else if (n === 10) {
        this.c10 = false
        this.$nextTick(() => {
          this.tenth(s)
        })
      } else if (n === 11) {
        this.c11 = false
        this.$nextTick(() => {
          this.eleventh(s)
        })
      } else if (n === 12) {
        this.c12 = false
        this.$nextTick(() => {
          this.twelfth(s)
        })
      } else if (n === 13) {
        this.c13 = false
        this.$nextTick(() => {
          this.thirteenth(s)
        })
      } else if (n === 14) {
        this.c14 = false
        this.$nextTick(() => {
          this.fourteenth(s)
        })
      } else if (n === 15) {
        this.c15 = false
        this.$nextTick(() => {
          this.fifteenth(s)
        })
      } else if (n === 16) {
        this.c16 = false
        this.$nextTick(() => {
          this.sixteenth(s)
        })
      }
    },
    close() {
      this.c1 = true
      this.c2 = true
      this.c3 = true
      this.c4 = true
      this.c5 = true
      this.c6 = true
      this.c7 = true
      this.c8 = true
      this.c9 = true
      this.c10 = true
      this.c11 = true
      this.c12 = true
      this.c13 = true
      this.c14 = true
      this.c15 = true
      this.c16 = true
    },
    searchHandle1() {
      if (this.currentOpenIndex === 1) {
        this.first('bigCharts')
        this.first()
      }
      if (this.currentOpenIndex === 2) {
        this.second('bigCharts')
        this.second()
      }
      if (this.currentOpenIndex === 3) {
        this.third('bigCharts')
        this.third()
      }
      if (this.currentOpenIndex === 4) {
        this.fourth('bigCharts')
        this.fourth()
      }
      if (this.currentOpenIndex === 5) {
        this.fifth('bigCharts')
        this.fifth()
      }
      if (this.currentOpenIndex === 6) {
        this.sixth('bigCharts')
        this.sixth()
      }
      if (this.currentOpenIndex === 7) {
        this.seventh('bigCharts')
        this.seventh()
      }
      if (this.currentOpenIndex === 8) {
        this.eighth('bigCharts')
        this.eighth()
      }
      if (this.currentOpenIndex === 9) {
        this.ninth('bigCharts')
        this.ninth()
      }
      if (this.currentOpenIndex === 10) {
        this.tenth('bigCharts')
        this.tenth()
      }
      if (this.currentOpenIndex === 11) {
        this.eleventh('bigCharts')
        this.eleventh()
      }
      if (this.currentOpenIndex === 12) {
        this.twelfth('bigCharts')
        this.twelfth()
      }
      if (this.currentOpenIndex === 13) {
        this.thirteenth('bigCharts')
        this.thirteenth()
      }
      if (this.currentOpenIndex === 14) {
        this.fourteenth('bigCharts')
        this.fourteenth()
      }
      if (this.currentOpenIndex === 15) {
        this.fifteenth('bigCharts')
        this.fifteenth()
      }
      if (this.currentOpenIndex === 16) {
        this.sixteenth('bigCharts')
        this.sixteenth()
      }
    },
    factoryChange1(value) {
      if (value !== this.queryWorkshop1) {
        this.searchData1.member = null
        this.queryWorkshop1 = value
      }
    },
    factoryChange3(value) {
      if (value !== this.queryWorkshop3) {
        this.searchData3.member = null
        this.queryWorkshop3 = value
      }
    },
    factoryChange6(value) {
      if (value !== this.queryWorkshop6) {
        this.searchData6.member = null
        this.queryWorkshop6 = value
      }
    },
    factoryChange10(value) {
      if (value !== this.queryWorkshop10) {
        this.searchData10.member = null
        this.queryWorkshop10 = value
      }
    }
  }
}
</script>
<style scoped>
.charts-wrap{
  box-sizing: border-box;
  background-color: #dfe4ed;
}
.charts-wrap .workshop-charts-common{
  height: 350px;
  background-color: #fff;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
}
.charts-wrap .workshop-charts-common .right-icon {
  width: 20px;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 20px;
  cursor: pointer;
}
.bigCharts{
  width: 100%;
  height: 500px;
}
.condition{
  text-align: center;
}
.condition .select-div{
  display: inline-block;
}
.eacharts-spans{
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 50%;
}
</style>
